<template>
  <div>
    <div class="gva-form-box">
      <el-form
        ref="emailForm"
        label-position="right"
        label-width="80px"
        :model="form"
      >
        <el-form-item label="收件人">
          <el-input v-model="form.to" />
        </el-form-item>
        <el-form-item label="主题">
          <el-input v-model="form.subject" />
        </el-form-item>
        <!-- <el-form-item label="邮件内容">
          <el-input v-model="form.body" type="textarea" />
        </el-form-item> -->
        <el-form-item label="内容"> <wang ref="wangValue" /> </el-form-item>

        <el-form-item>
          <el-button @click="sendEmailToOther">发送邮件</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Email',
}
</script>

<script setup>
import wang from '@/components/wangeditor/index.vue'
import { emailByFrom } from '@/plugin/email/api/email.js'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useUserStore } from '../../pinia/modules/user'
const emailForm = ref(null)
const userStore = useUserStore()
const wangValue = ref(null)
const form = reactive({
  uuid: userStore.userInfo.uuid,
  to: '',
  subject: '',
  body: '',
})

const sendEmailToOther = async () => {
  console.log(
    '%c 🥝 form: ',
    'font-size:20px;background-color: #FCA650;color:#fff;',
    form
  )
  const htmltemplate = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ${wangValue.value.valueHtml}
</body>
</html>
`
  form.body = htmltemplate
  const res = await emailByFrom(form)
  if (res.code === 0) {
    ElMessage.success('发送成功,请查收')
  }
}
</script>
